<template>
  <div class="swiperItem2">
		<cover>
			<img class="img" :src="imgLink" alt="" :style="{width:width,height:height}">
		</cover>
	  <div class="info">
			<a class="name" href="#">{{name}}</a>
			<a class="singer" href="#">{{singer}}</a>
		</div>
		<div class="relayNum">
			<svg class="icon" aria-hidden="true">
			    <use xlink:href="#icon-bofangliang"></use>
			</svg>
			{{relayNum}}
		</div>
  </div>
</template>

<script>
	import cover from '../common/cover.vue'
  export default{
    name:'',
    data(){
      return {
		  
       }
    },
	props:{
		imgLink:{
		  type:String,
		  default(){
		    return require('../../assets/img/test2.jpg')
		  }
		},
	  name:{
	    type:String,
	    default(){
	      return "11111111111111111111111111111111111"
	    }
	  },
	  singer:{
		  type:String,
		  default(){
			  return "111111"
		  }
	  },
	  relayNum:{
		  type:String,
		  default(){
		  	return "11111"
		  }
	  },
		width:{
		  type:String,
		  default(){
		  	return "200px"
		  }
		},
		height:{
			type:String,
			default(){
				return "116px"
			}
		},
	},
    methods:{
      
    },
    components:{
       cover
    }
  }
</script>

<style scoped>
	.icon {
		 width: 15px; 
		 height: 15px;
		 vertical-align: -0.15em;
		 fill: currentColor;
		 overflow: hidden;
	}
	.swiperItem2{
	  display: flex;
	  flex-direction: column;
	}
	.name{
		width: 190px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.name:hover{
		font-weight: bolder;
	}
	.singer{
		color: var(--font-grey);
	}
	.singer:hover{
		color: var(--bcc-green);
	}
	.info{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.time{
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--font-grey);
	}
</style>
